<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>大麦网演唱会--筛选数据</title>
    <link rel="stylesheet" href="../css/common.css">
    <style>
        .container {
            padding: 20px;
        }

        .list {
            width: 800px;
            height: 50px;
            border: 1px solid #cccccc;
            margin: 5px 0px;
        }

        .list li {
            padding: 5px 10px;
            margin: 0 10px;
            cursor: pointer;
        }

        .list li.active {
            background: orangered;
            color: #ffffff;
        }

        .show {
            width: 800px;
            border: 1px solid #cccccc;
            margin: 5px 0px;
            padding: 10px;
            box-sizing: border-box;
        }

        .show>.ticket {
            box-sizing: border-box;
            margin: 10px 0px;
            border-bottom: 1px dashed #cccccc;
        }

        .show>.ticket img {
            width: 180px;
            height: 250px;
        }

        .show>.ticket>ul {
            margin-left: 10px;
        }

        .show>.ticket>ul>li {
            margin: 10px 0px;
        }

        .show>.ticket>ul>li.title {
            font-size: 18px;
            font-weight: bold;
        }
        .search{
            padding: 0px 10px;
            box-sizing: border-box;
        }
        .search input{
            width: 200px;
            height: 24px;
            padding-left: 5px;
        }
        .search button{
            width: 50px;
            height: 28px;
        }
    </style>
</head>

<body>
    <div class="container">
        <ul class="list search flex a-c">
            <input type="text" id="title" placeholder="请输入查找内容">
            <button id="btn">搜索</button>
        </ul>
        <ul class="city list flex a-c">
            <!-- 第二步：定义模板 -->
            <script id="list_template" type="text/html">
                {{each $data item index}}
                    <li class="{{index===0 ? 'active' : ''}}">{{item.city}}</li>
                {{/each}}
            </script>
            <!-- <li class="active">全部</li>
            <li>北京</li>
            <li>上海</li>
            <li>南京</li> -->
        </ul>
        <ul class="type list flex a-c">
            <script id="type_template" type="text/html">
                {{each $data item index}}
                    <li class="{{index===0 ? 'active' : ''}}">{{item.type}}</li>
                {{/each}}
            </script>
            <!-- <li class="active">全部</li>
            <li>演唱会</li>
            <li>音乐会</li>
            <li>体育</li> -->
        </ul>
        <div class="show">
            <script id="show_template" type="text/html">
                {{each $data item}}
                <div class="ticket flex">
                    <div class="img">
                        <img src="{{item.img}}">
                    </div>
                    <ul>
                        <li class="title">{{item.title}}</li>
                        <li>{{item.city}}</li>
                        <li>{{item.type}}</li>
                        <li>{{item.time}}</li>
                    </ul>
                </div>
                {{/each}}
            </script>
            <!-- <div class="ticket flex">
                <div class="img">
                    <img
                        src="https://img.alicdn.com/bao/uploaded/https://img.alicdn.com/imgextra/i3/2251059038/O1CN019zOA512GdSHDlmFF4_!!2251059038.jpg_q60.jpg_.webp">
                </div>
                <ul>
                    <li class="title">【北京】 杭盖乐队《北归》摇滚与铜管音乐会</li>
                    <li>北京</li>
                    <li>演唱会</li>
                    <li>2020.12.04-12.05</li>
                </ul>
            </div> -->
        </div>
    </div>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
    <!-- 第一步：引入artTemplate模板引擎库 -->
    <script src="./js/artTemplate.js"></script>
    <script>
        //获取城市
        $.get('./data/city.json', data => {
            // 第三步：将 模板 和 数据 传递给模板引擎，模板引擎返回组织过后的html内容
            let html = template('list_template', data)
            // 第四步：在页面中显示内容
            $('.city').html(html);
        })

        //获取类型
        $.get('./data/type.json', data => {
            // 第三步：将 模板 和 数据 传递给模板引擎，模板引擎返回组织过后的html内容
            let html = template('type_template', data)
            // 第四步：在页面中显示内容
            $('.type').html(html);
        })

        //获取数据的方法
        function getShow() {
            let title = $('#title').val().trim()  //获取搜索内容
            let city = $('.city li.active').text().trim()  //获取城市
            let type = $('.type li.active').text().trim()  //获取类型
            //获取数据
            $.get('./data/show.json', data => {
                //判断是否需要根据搜索内容筛选信息
                if(title) data = data.filter(r=>r.title.includes(title))
                //判断是否需要根据城市筛选数据
                if(city && city!=='全部') data = data.filter(r=>r.city===city)
                //判断是否需要根据类型筛选数据
                if(type && type!=='全部') data = data.filter(r=>r.type===type)

                let html = template('show_template', data)
                $('.show').html(html)
            })
        }

        getShow()  //调用一次显示数据的方法

        //页面加载时，li标签是可以还没有加载完毕
        //所以，li的点击事件，委托给父级.list注册
        $('.list').on("click","li",function(){
            $(this).addClass('active').siblings('.active').removeClass('active')
            getShow()  //重新显示数据
        })

        //搜索按钮点击事件
        $('#btn').click(function(){
            getShow()  //重新显示数据
        })
    </script>
</body>

</html>